<template>
  <div class="custom-portrait">
    <!-- 事件详情 -->
    <div class="component-container">
      <!-- 上部分 -->
      <div class="drawcontainer">
        <!-- 返回按钮 -->
        <!-- $route.query.id && $route.query.showBack -->
        <div v-if="$route.query.showBack=='true'" class="back">
          <i
            class="el-icon-arrow-left"
            style="color:#4b6eef;cursor:pointer "
            @click="$router.back()"
          >返回</i> |
          <span style="color: #505255; margin-left: .3125rem;">事件详情</span>
        </div>
        <el-collapse v-model="activeNames" class="content-wk">
          <!--    基础信息       -->
          <div class="headtext" v-show="showEventData ">
            <!-- 文字部分 -->
            <div style="width: 100%; padding-left: 1.25rem">
              <div class="flex-box">
                <h4 style="flex: 1;font-weight: 600;">基础信息</h4>
                <div>
                  <el-checkbox v-model="checked" @change="handleCheck($event)">仅显示非空字段</el-checkbox>
                </div>
              </div>
              <!-- 内容部分 -->
              <div class="headcontent">
                <el-row class="row-content">
                  <el-col v-if="!isHidden || detailData.event_name" :span="8">
                    <span>事件名称：</span>
                    {{ detailData.event_name }}
                  </el-col>
                  <el-col v-if="!isHidden || detailData.event_level" :span="8">
                    <span>事件级别：</span>
                    <template v-for="i in detailData.event_level">
                      <el-tag
                        :type=" i == '特别重大'
                          ? 'danger'
                          : i == '重大'
                            ? 'warning'
                            : i == '较大'
                              ? ''
                              : 'success'"
                      >{{ i }}
                      </el-tag>
                    </template>
                  </el-col>
                  <el-col v-if="!isHidden || detailData.event_category" :span="8">
                    <span>类别：</span>
                    <div
                      v-for="(i, index) in detailData.event_category"
                      :key="index"
                      style="display: inline-block;"
                    >{{ i }}
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-content">
                  <el-col v-if="!isHidden || detailData.disposal_time" :span="8">
                    <span>处置时间：</span>
                    {{ detailData.disposal_time ? detailData.disposal_time : '-' }}
                  </el-col>
                  <el-col v-if="!isHidden || detailData.disposal_status" :span="8">
                    <span>处置状态：</span>
                    <div
                      style="display: inline-block; vertical-align: middle; line-height: .0625rem"
                      :class="
                        detailData.disposal_status == '0'
                          ? 'text-level-greatmast'
                          : detailData.disposal_status == '3'
                            ? 'text-level-normal'
                            : 'text-level-green'
                      "
                    >
                      <i
                        :class="detailData.disposal_status==0?'el-icon-warning':detailData.disposal_status==1?'el-icon-success':'el-icon-time'"
                      />
                      <span>
                        {{
                          detailData.disposal_status == 0
                            ? '未处置'
                            : detailData.disposal_status == 3
                              ? '已处置'
                              : '处置中'
                        }}
                      </span>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="row-content">
                  <el-col v-if="!isHidden || detailData.happen_time" :span="8">
                    <span>发现时间：</span>
                    {{ detailData.happen_time }}
                  </el-col>
                  <el-col v-if="!isHidden || detailData.event_time" :span="8">
                    <span>告警时间：</span>
                    {{ parseTime(detailData.event_time) }}
                  </el-col>
                </el-row>
                <el-row class="row-content">
                  <el-col v-if="!isHidden || detailData.event_details" :span="24">
                    <span>事件详情：</span>
                    {{ detailData.event_details }}
                  </el-col>
                </el-row>
                <!-- <el-row class="row-content">
                  <el-col v-if="!isHidden || detailData.rule_desc" :span="24">
                    <span>处置信息：</span>{{ detailData.eventDisposal? detailData.eventDisposal.disposalContent : '-' }}
                  </el-col>
                </el-row>-->
              </div>
            </div>
          </div>
          <!--   其他信息  -->
          <!--          <div class="headtext" v-if="!isHidden || detailData.name || detailData.time">
                      <div style="width: 100%; padding-left: 1.25rem">

                        <el-collapse-item title="其他信息" name="2">
                          &lt;!&ndash; 内容部分 &ndash;&gt;
                          <div class="headcontent">
                            <el-row class="row-content">
                              <el-col :span="8" v-if="!isHidden || detailData.name"><span>事件版本号：</span>{{ detailData.name }}</el-col>
                              <el-col :span="8" v-if="!isHidden || detailData.time"><span>其他扩展信息：</span>{{ detailData.time }}</el-col>
                            </el-row>
                          </div>
                        </el-collapse-item>

                      </div>
          </div>-->
          <!--     关联设备     -->
          <div v-if="!isHidden || devicesTableData.length > 0" class="headtext">
            <div style="width: 100%; padding-left: 1.25rem">
              <el-collapse-item title="关联设备" name="3">
                <!-- 内容部分 -->
                <div class="headcontent">
                  <HkTable
                    :table-data="devicesTableData"
                    :table-columns="devicesTableLabels"
                    :show-index="true"
                    :show-pag="false"
                  >
                    <template #hostName="scope">
                      <el-button
                        type="text"
                        @click="$router.push(prefix+'/dispose/entityPortrait?id=' + scope.row.id)"
                      >{{ scope.row.hostName }}
                      </el-button>
                    </template>
                    <template #hostType="scope">
                      <dictLabel :options="hostTypeOption" :value="scope.row.hostType"/>
                    </template>
                    <template #securityLevel="scope">
                      <dictLabel :options="equipmentSecLevelOption" :value="scope.row.securityLevel"/>
                    </template>
                  </HkTable>
                </div>
              </el-collapse-item>
            </div>
          </div>
          <!--     关联人员     -->
          <div v-if="!isHidden || userTableData.length > 0" class="headtext">
            <!-- 标题 -->
            <div style="width: 100%; padding-left: 1.25rem">
              <el-collapse-item title="关联人员" name="4">
                <!-- 内容部分 -->
                <div class="headcontent">
                  <HkTable
                    :table-data="userTableData"
                    :table-columns="userTableLabels"
                    :show-index="true"
                    :operate="false"
                    :show-pag="false"
                    :is-need-index="true"
                  >
                    <!--   <template #userName="scope">
                      <el-button type="text">{{ scope.row.row.userName }}</el-button>
                    </template>-->
                    <template #secLevel="scope">
                      <dictLabel :options="secLevelOption" :value="scope.row.row.secLevel"/>
                    </template>
                    <template #nationType="scope">
                      <dictLabel :options="nationTypeOption" :value="scope.row.row.nationType"/>
                    </template>
                  </HkTable>
                </div>
              </el-collapse-item>
            </div>
          </div>
          <!--     关联应用     -->
          <div v-if="!isHidden || applyTableData.length > 0" class="headtext">
            <div style="width: 100%; padding-left: 1.25rem">
              <el-collapse-item title="关联应用" name="5">
                <!-- 内容部分 -->
                <div class="headcontent">
                  <HkTable
                    :table-data="applyTableData"
                    :table-columns="applyTableLabels"
                    :show-index="true"
                    :operate="false"
                    :show-pag="false"
                    :is-need-index="true"
                  >
                    <template #equipmentSecLevel="scope">
                      <dictLabel
                        :options="equipmentSecLevelOption"
                        :value="scope.row.row.equipmentSecLevel"
                      />
                    </template>
                    <template #equipmentOverview="scope">{{ scope.row.row.equipmentOverview }}</template>
                  </HkTable>
                </div>
              </el-collapse-item>
            </div>
          </div>
          <!--     关联文件     -->
          <!--          <div class="headtext">
                      <div style="width: 100%; padding-left: 1.25rem">

                        <el-collapse-item title="关联文件" name="6">
                          &lt;!&ndash; 内容部分 &ndash;&gt;
                          <div class="headcontent">
                            <HkTable
                              :tableData="devicesTableData"
                              :tableColumns="devicesTableLabels"
                              :showIndex="true"
                              :operate="true"
                              :showPag="false"
                              :isNeedIndex="true"
                            >
                            </HkTable>
                          </div>
                        </el-collapse-item>

                      </div>
          </div>-->
          <!--     监管策略     -->
          <div v-if="detailData.rule_name || detailData.rule_desc" class="headtext">
            <div style="width: 100%; padding-left: 1.25rem">
              <el-collapse-item class="collapse-box" title="监管策略" name="7">
                <!-- 内容部分 -->
                <div class="headcontent">
                  <el-row class="row-content" style="margin-right: 1.25rem">
                    <el-col :span="21">
                      <el-row>
                        <el-col v-if="!isHidden || detailData.rule_name" :span="10" align="top">
                          <span>监管规则名称：</span>
                          <div class="text-elipsis line">{{ detailData.rule_name }}</div>
                        </el-col>
                        <el-col v-if="!isHidden || detailData.rule_desc" :span="11" align="top">
                          <span>监管规则描述：</span>
                          <div class="text-elipsis">{{ detailData.rule_desc || '-' }}</div>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="3" style="text-align: right">
                      <el-button
                        v-if="isShowRuleBtn"
                        type="primary"
                        @click="$router.push(prefix+'/icp/rule?name=' + detailData.rule_name)"
                      >策略优化
                      </el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </div>
          </div>
          <!--     上下文信息     -->
          <!--          <div class="headtext">
                      <div style="width: 100%; padding-left: 1.25rem">

                        <el-collapse-item title="上下文信息" name="8">
                          &lt;!&ndash; 内容部分 &ndash;&gt;
                          <div class="headcontent">
                            <timeLine :tableData="infoData"></timeLine>
                          </div>
                        </el-collapse-item>

                      </div>
          </div>-->
          <!--  处置流程  -->
          <div class="headtext">
            <div class="flow-wk">
              <div v-if="disposal_type!=1 && disposal_type != 3" class="flow-list timeline-item timeline-finist">
                <el-tabs v-model="disposalType">
                  <el-tab-pane v-if="!disposal_type" label="处置事件" name="1">
                    <h4 class="timeline-title">
                      <span>{{ formTitle }}</span>
                    </h4>
                    <div class="timeline-container">
                      <div class="form-list">
                        <my-generate-form
                          ref="generateForm"
                          :data="jsonData"
                          :value="jsonValue"
                          @on-change="handleGenerateChage"
                        />
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane v-if="!disposal_type ||disposal_type==0" label="关闭事件" name="0">
                    <hk-form
                      ref="hkFormRef"
                      :form-labels="closeFormObj.formLabels"
                      :data="closeFormData"
                      :btn-hidden="true"
                      :dict-list="dictList"
                      label-width="120"
                      :disabled="disposal_type==0"
                      :rules="formRule"
                    />
                  </el-tab-pane>
                  <el-tab-pane v-if="!disposal_type ||disposal_type==2" label="应急响应预案" name="2">
                    <HkTable
                      :table-data="emergencyTableData"
                      :table-columns="emergencyTableLabels"
                      :show-index="true"
                      :show-pag="false"
                    />
                  </el-tab-pane>
                  <el-tab-pane v-if="((!disposal_type || disposal_type==3 ) && ($route.query.ids && $route.query.ids.split(',').length === 1))" label="发起协查申请" name="3">
                    <h4 class="timeline-title">
                      <span>{{ applyFormTitle }}</span>
                    </h4>
                    <div class="timeline-container">
                      <div class="form-list">
                        <my-generate-form
                          ref="generateApplyForm"
                          :data="applyJsonData"
                          :value="applyJsonValue"
                          @on-change="handleGenerateChage"
                        />
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div v-else class="flow-list timeline-item timeline-finist">
                <div v-for="(item, index) in formInstances">
                  <h4 class="timeline-title">
                    <span>{{ item.formName }}</span>
                  </h4>
                  <div class="timeline-container">
                    <div class="form-list">
                      <my-generate-form
                        v-if="isShowForm"
                        ref="generateForm"
                        :data="JSON.parse(item.formContent)"
                        :value="item.formData?JSON.parse(item.formData):{}"
                        :remote="remoteFuncs[index]"
                        :disabled="!item.canEdit"
                        @on-change="handleGenerateChage"
                      />
                      <template v-if="item.hasfiles">
                        <div v-for="(i,inx) in fileInfo[index]">
                          <a class="file-link" :href="i.url">{{ i.name }}</a>
                        </div>
                      </template>
                      <el-upload
                        v-if="item.isfileUpload && !item.id"
                        class="upload-demo"
                        :action="fileOpts.url"
                        :limit="fileOpts.limit"
                        :headers="fileOpts.headers"
                        :on-change="handleFileUploadProgress"
                        multiple
                        :file-list="fileList"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove"
                        accept=".zip, .docx, .xlsx"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" style="margin-top:1.25rem;font-size:.875rem;">
                          <span>支持扩展名：{{ fileOpts.accept }}</span>
                        </div>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-collapse>

        <div class="footer">
          <el-button
            v-if="detailData.disposal_status == '0' || isHandle"
            type="primary"
            :disabled="!emergencyTableData.length &&disposalType==2"
            @click="submitForm"
          >提 交
          </el-button>
          <el-button v-if="$route.query.showBack=='true'" @click="$router.back()">关 闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getDetails,
  getDetailsByBatchId,
  dictList,
  disposal,
  execute,
  getProcessForm,
  directly,
  queryContentByKpiCode, getApplyProcessForm
} from '@/api/dispose/incidentHandling'
import { getExecuteForm } from '@/api/dispose/tasks'
import { getToken } from '@/utils/auth'
import { get } from '@/utils/request'
import HkForm from '@/components/Hk-Form/index.vue'

const BASE_URL = window.baseUrl.ticket

import HkTable from '@/components/Hk-Table'
import MyGenerateForm from './components/GenerateForm'
import dictLabel from '@/components/Common/DicLabel'

export default {
  components: { HkTable, dictLabel, MyGenerateForm, HkForm },
  beforeRouteLeave(to, from, next) {
    if (to.path == '/dispose/incidentHandle') {
      to.meta.keepAlive = true
    }
    next()
  },
  data() {
    return {
      prefix: window.prefix,
      closeFormData: {},
      closeFormObj: {
        formLabels: [
          {
            label: '事件成因',
            field: 'eventCause',
            type: 'select',
            list: 'eventCauseList',
            span: 24
          },
          {
            label: '危害程度评估',
            field: 'hazardAssess',
            type: 'radio',
            list: 'hazardAssessList',
            span: 24
          },
          {
            label: '事件过程',
            field: 'eventProcess',
            type: 'textarea',
            attrs: {
              rows: 5
            },
            maxlength: 500,
            span: 24
          },
          {
            label: '处置措施',
            field: 'disposalContent',
            type: 'textarea',
            attrs: {
              rows: 5
            },
            maxlength: 500,
            span: 24
          }
        ]
      },
      formRule: {
        eventCause: [{ required: true, message: '不能为空', trigger: 'change' }],
        hazardAssess: [{ required: true, message: '不能为空', trigger: 'change' }],
        eventProcess: [{ required: true, message: '不能为空', trigger: 'blur' }],
        disposalContent: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      dictList: {
        eventCauseList: [
          { value: 0, label: '正常业务操作' },
          { value: 1, label: '网络故障' },
          { value: 2, label: '硬件设备故障' },
          { value: 3, label: '控制策略配置失效' },
          { value: 4, label: '违规安装/卸载软件' },
          { value: 5, label: '病毒感染' },
          { value: 6, label: '恶意程序网络探测' },
          { value: 7, label: '恶意操作' },
          { value: 8, label: '成因不明' }
        ],
        hazardAssessList: [
          {
            value: 0,
            label: '未造成泄密'
          },
          {
            value: 1,
            label: '已造成泄密'
          }
        ]
      },
      disposal_type: undefined,
      checked: true,
      isHidden: true,
      detailData: {
        disposal_status: '1'
      },
      // tab页选中状态
      disposalType: this.$route.query.disposalStatus || '1',
      currentId: '',
      devicesTableData: [],
      devicesTableLabels: [
        { label: '名称', param: 'hostName', type: 'slot' },
        { label: 'IP地址', param: 'ip' },
        { label: 'MAC地址', param: 'mac' },
        { label: '类型', param: 'hostType', type: 'slot' },
        { label: '密级', param: 'securityLevel', type: 'slot' }
        /* { label: '存储位置', param: '' },
         { label: '所属安全域', param: '' }*/
      ],

      // 关联设备
      emergencyTableData: [],
      emergencyTableLabels: [
        { label: '标题', param: 'title' },
        { label: '内容', param: 'content' }
      ],
      //  关联人员
      userTableData: [],
      userTableLabels: [
        { label: '名称', param: 'userName' },
        { label: '部门', param: 'orgName' },
        { label: '岗位', param: 'post' },
        { label: '密级', param: 'secLevel', type: 'slot' },
        { label: '类型', param: 'nationType', type: 'slot' },
        { label: '角色', param: 'job' },
        { label: '账号', param: 'account' }
      ],
      //  关联应用
      applyTableData: [],
      applyTableLabels: [
        { label: '名称', param: 'name' },
        { label: '类型', param: 'equipmentType' },
        { label: '是否国产化', param: 'equipmentLocalized' },
        { label: '密级', param: 'equipmentSecLevel', type: 'slot' },
        { label: '所在服务器', param: 'deployServer' },
        { label: '应用服务名称', param: 'equipmentOverview', type: 'slot' }
      ],
      //  关联文件
      fileTableData: [],
      fileTableLabels: [
        { label: '名称', param: '' },
        { label: '文件MD5', param: '' },
        { label: '文件类型', param: '' },
        { label: '密级', param: '' },
        { label: '存储路径', param: '' }
      ],
      // 处置信息
      eventDisposal: {},
      // 处置过程
      infoTableData: [],
      infoTableLabels: [
        { label: '标题', param: 'title' },
        { label: '事件', param: 'updateTime' },
        { label: '处置状态', param: 'disposalStatus', type: 'slot' },
        { label: '操作人', param: 'operatorName' },
        { label: '操作时间', param: 'updateTime' }
      ],
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      statusOptions: [
        { label: '未处置', value: '0' },
        { label: '已处置', value: '1' },
        { label: '处置中', value: '2' }
      ],
      equipmentSecLevelOption: [],
      secLevelOption: [],
      nationTypeOption: [],
      hostTypeOption: [],
      jsonData: {},
      jsonValue: {},
      applyJsonData: {},
      applyJsonValue: {},
      formTitle: '保密主管发起事件核实',
      applyFormTitle: '发起协查申请',
      // true: 处置, false: 发起工单
      needHandle: false,
      // 表单数据
      formInstances: [],
      formDetailsLists: [],
      lists: null,
      remoteObjs: [],
      remoteFuncs: [],
      isShowForm: false,
      // 处置参数
      handleQuery: {},
      fileOpts: {
        url: window.baseUrl.ticket + '/attachment/upload',
        limit: 3,
        accept: 'zip,docx,xlsx',
        params: 'files',
        headers: { Authorization: 'Bearer ' + getToken() }
      },
      hasfiles: false,
      fileInfo: [],
      fileList: [],
      fileJson: [],
      showEventData: true,
      isShowRuleBtn: false,
      // 是否显示提交按钮
      isHandle: false
    }
  },
  created() {
    this.isShowRuleBtn =
      JSON.parse(sessionStorage.getItem('userInfo'))?.roleCode !== 'oper' &&
      JSON.parse(sessionStorage.getItem('userInfo'))?.roleCode !== 'bus'
    this.currentId = this.$route.query.ids
    if (this.$route.query.type) {
      this.handleQuery.batchId = this.$route.query.ids
      this.getDataByBatchId()
    } else {
      const _ids = this.$route.query.ids?.split(',')
      this.handleQuery.ids = [..._ids]
      this.getData()
    }
    this.getDictList('equipmentSecLevel')
    this.getDictList('secLevel')
    this.getDictList('nationType')
    this.getDictList('hostType')
    this.getDictList('incidentEventCause')
    this.getDictList('incidentHazardAssess')
  },
  methods: {
    //   处置
    async submitForm() {
      if (this.disposalType == 0) {
        const valid = await this.$refs?.hkFormRef?.handleFormSubmit('formLabels')
        if (!valid) {
          this.$message.warning('有必填项未完成')
        }
      }
      const str = this.disposalType == 0 ? '是否确认关闭？' : '是否确认处置？'
      this.$modal.confirm(str).then(res => {
        this.handleQuery.disposalType = this.disposalType
        if (this.disposalType == 0) {
          this.handleQuery.formJson = JSON.stringify(this.closeFormData)
          disposal(this.handleQuery).then(res => {
            this.$message.success('关闭成功')
            this.cancel()
          })
        } else if (this.disposalType == 2) {
          this.handleQuery.formJson = ''
          disposal(this.handleQuery).then(res => {
            this.$message.success('处置成功')
            this.cancel()
          })
        } else if (this.needHandle) {
          this.$refs.generateForm[this.formInstances.length - 1]
            .getData()
            .then(data => {
              data.attachment = this.fileJson.map(item => {
                return {
                  file_path: item.response.data[0].file_path,
                  file_name: item.response.data[0].file_name
                }
              })
              this.handleQuery.formJson = JSON.stringify(data)
              execute(this.handleQuery).then(res => {
                this.$message.success('处置成功')
                if (this.$route.query.type) {
                  this.cancel()
                } else {
                  this.$router.push(window.prefix + '/dispose/incidentHandle')
                }
              })
            })
            .catch(err => {
              this.$message.error(err)
            })
        } else if (this.disposalType == 3) {
          this.$refs.generateApplyForm
            .getData()
            .then(data => {
              data.attachment = this.fileJson.map(item => {
                return {
                  file_path: item.response.data[0].file_path,
                  file_name: item.response.data[0].file_name
                }
              })
              this.handleQuery.formJson = JSON.stringify(data)
              disposal(this.handleQuery).then(res => {
                this.$message.success('处置成功')
                this.cancel()
              })
            })
            .catch(err => {
              this.$message.error(err)
            })
        } else {
          this.$refs.generateForm
            .getData()
            .then(data => {
              data.attachment = this.fileJson.map(item => {
                return {
                  file_path: item.response.data[0].file_path,
                  file_name: item.response.data[0].file_name
                }
              })
              this.handleQuery.formJson = JSON.stringify(data)
              disposal(this.handleQuery).then(res => {
                this.$message.success('处置成功')
                this.cancel()
              })
            })
            .catch(err => {
              this.$message.error(err)
            })
        }
      })
    },
    //  关闭
    cancel() {
      const _this = this
      setTimeout(function() {
        if (_this.$route.query.type == 'batchId') {
          _this.$router.push(window.prefix + '/dispose/tasks')
        } else {
          _this.$router.push(window.prefix + '/dispose/incidentHandle')
        }
      }, 1000)
    },

    /** 获取详情 */
    getData() {
      getDetails(this.currentId).then(res => {
        this.needHandle = true
        this.setData(res)
        if (res.disposal_type == 0) {
          directly(res.batchId).then(r => {
            if (r.length) {
              const { disposalContent, eventCause, eventProcess, hazardAssess } = r[0]
              this.closeFormData = {
                disposalContent,
                eventCause: eventCause,
                eventProcess,
                hazardAssess: hazardAssess
              }
            }
          })
        }
        if (res.disposal_type == 2 || res.disposal_status == 0) {
          queryContentByKpiCode(res.metrics_code).then(r => {
            this.emergencyTableData = r
          })
        }
        this.handleQuery.eventName = res.metrics_name || ''
        this.handleQuery.eventType = res.event_type[0] || ''
        this.handleQuery.orgId = res.org_id || ''
        this.handleQuery.batchId = res.batchId || ''
      })
    },
    getDataByBatchId() {
      getDetailsByBatchId(this.currentId).then(res => {
        this.handleQuery.orgId = res?.org_id ? res.org_id : ''
        this.setData(res)
      })
    },
    /** 数据处理 */
    setData(res) {
      this.devicesTableData = res?.assetsHosts ? res?.assetsHosts : []
      this.userTableData = res?.assetsPersons ? res?.assetsPersons : []
      this.applyTableData = res?.assetsApps ? res?.assetsApps : []
      this.infoTableData = res?.incidentOrdersVoList ? res?.incidentOrdersVoList : []
      this.detailData = res || {}
      this.showEventData = res !== null
      this.eventDisposal = res?.eventDisposal
        ? res.eventDisposal
        : { eventCause: undefined, hazardAssess: undefined, eventProcess: undefined, disposalContent: undefined }
      //  获取发起工单表单
      if (res === null) {
        this.disposal_type = '1'
      } else {
        this.disposal_type = res?.disposal_type
      }
      this.disposalType = res?.disposal_type || this.$route.query.disposalStatus || '1'
      if (res?.disposal_status === '0' && !(res?.reportType)) {
        this.getProcess({ eventType: res.event_type[0] })
        this.getApplyProcess()
      } else if (this.disposal_type == 1 || this.disposal_type == 3) {
        //  获取后续流程表单
        this.getExecute(res?.batchId || this.currentId)
      }
    },
    /** 获取发起工单表单 */
    getProcess(id) {
      getProcessForm(id).then(res => {
        this.needHandle = false
        this.formTitle = res?.name
        this.jsonData = res?.formTemplate ? JSON.parse(res?.formTemplate) : {}
      })
    },
    /** 获取协查申请表单 */
    getApplyProcess() {
      getApplyProcessForm().then(res => {
        this.needHandle = false
        this.applyFormTitle = res?.name
        this.applyJsonData = res?.formTemplate ? JSON.parse(res?.formTemplate) : {}
        this.applyJsonValue = {
          'event_name': this.detailData.event_name,
          'title': '对' + this.detailData.event_name + '事件的协查申请'
        }
      })
    },
    /** 获取后续流程表单 */
    getExecute(id) {
      getExecuteForm(id).then(async res => {
        this.fileInfo = []
        this.needHandle = true
        this.isHandle = res?.isHandle
        //  文件上传的信息
        /*  this.fileInfo = (res && res.formData && JSON.parse(res?.formData).attachment) || []
        if (this.fileInfo.length > 0) {
          this.fileList = JSON.parse(res?.formData).attachment.map(i => {
            return { name: i.file_name, url: i.file_path }
          })
        } */
        // 表单内容
        this.formInstances = res?.formInstances
        this.isfileUploadShow(this.formInstances)
        if (this.formInstances?.length > 0) {
          await this.formInstances.forEach(async(i, index) => {
            await this.setRemoteFunc(JSON.parse(i.formContent).list, index)
            if (i?.formData && JSON.parse(i?.formData).attachment?.length > 0) {
              this.formInstances[index].hasfiles = true
              const newFiles = JSON.parse(i?.formData).attachment.map(i => {
                return { name: i.file_name, url: i.file_path }
              })
              this.fileInfo.push(newFiles)
            } else {
              this.formInstances[index].hasfiles = false
              this.fileInfo.push([])
            }
          })
          this.isShowForm = true

          //  重置表单数据
          this.formDetailsLists = []
          res.formInstances.forEach(async i => {
            const lists = await this.setJsonLists(JSON.parse(i.formContent).list)
            if (lists.length > 0) {
              const arr = lists.map(item => {
                return { label: item.name, field: item.model, span: 12 }
              })
              this.formDetailsLists.push(arr)
            }
          })
        }
      })
    },
    //  设置动态获取的form表单
    async setRemoteFunc(param, index) {
      const newArr = await this.setJsonLists(param)
      this.remoteFuncs[index] = {}
      const remoteObjs = []
      const _self = this
      //  判断是否有上传附件
      newArr.forEach(i => {
        if (i.type === 'cascader' || i.type === 'radio' || i.type === 'select' || i.type === 'checkbox') {
          if (i.options.remote === true) {
            remoteObjs.push({ remoteFunc: i.options.remoteFunc, props: i.options.props })
          }
        }
      })
      if (remoteObjs.length > 0) {
        remoteObjs.forEach(i => {
          this.remoteFuncs[index][i.remoteFunc] = function(resolve) {
            const reg = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/g
            const reg2 = /^\//g
            if (reg.test(i.remoteFunc)) {
              get(i.remoteFunc).then(res => {
                resolve(res)
              })
            } else if (reg2.test(i.remoteFunc)) {
              get(BASE_URL + i.remoteFunc).then(res => {
                resolve(res)
              })
            } else {
              _self.$message.error('请配置正确的远端方法')
            }
          }
        })
      }
    },
    /**  点击多选框 */
    handleCheck(value) {
      this.isHidden = value
    },
    /** 获取字典项 */
    getDictList(query) {
      dictList({ itemType: query }).then(res => {
        switch (query) {
          case 'equipmentSecLevel':
            this.equipmentSecLevelOption = res.map(i => {
              return { label: i.itemLabel, value: i.itemVale }
            })
            break
          case 'hostType':
            this.hostTypeOption = res.map(i => {
              return { label: i.itemLabel, value: i.itemVale }
            })
            break
          case 'secLevel':
            this.secLevelOption = res.map(i => {
              return { label: i.itemLabel, value: i.itemVale }
            })
            break
          case 'nationType':
            this.nationTypeOption = res.map(i => {
              return { label: i.itemLabel, value: i.itemVale }
            })
            break
          case 'incidentEventCause':
            this.dictList.eventCauseList = res.map(i => {
              return { label: i.itemLabel, value: i.itemVale }
            })
            break
          case 'incidentHazardAssess':
            this.dictList.hazardAssessList = res.map(i => {
              return { label: i.itemLabel, value: i.itemVale }
            })
        }
      })
    },
    //  表单元素发生变化
    handleGenerateChage(field = '', value = '', data = {}) {
      // if (this.needHandle && this.generateFormData.length > 0) {
      //   this.generateFormData[this.generateFormData.length - 1].formInstances.formData = JSON.stringify(data)
      // }
    },
    // 判断是否有显示上传附件单选按钮
    isfileUploadShow(param) {
      if (param?.length > 0) {
        param.forEach(i => {
          const _list = JSON.parse(i.formContent).list
          _list.forEach(j => {
            if (j.model === 'isFileUpload') {
              i.isfileUpload = true
            } else {
              i.isfileUpload = false
            }
          })
        })
      }
    },
    //  平铺数组
    setJsonLists(param, newArr = []) {
      const arr = []
      if (param.length > 0) {
        param.forEach(i => {
          if (i.type === 'grid') {
            if (i.columns.length > 0) {
              i.columns.forEach(j => {
                this.setJsonLists(j.list, arr)
              })
            }
          } else {
            return arr.push(i)
          }
        })
        newArr.push.apply(newArr, arr)
        return newArr
      }
    },
    // 发生改变
    handleFileUploadProgress(file, fileList) {
      if (fileList.length > 3) {
        this.fileList = fileList.slice(-3)
      }
      this.fileJson = fileList
    },
    // 文件数量超过3条
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    //  上传成功
    handleSuccess(success, file, fileList) {
      if (success.code == 200) {
        this.$message.success('上传成功')
        this.fileInfo = success.data
      } else {
        this.$message.error(success.msg)
      }
    },
    //  文件列表取消钩子
    handleRemove(file, fileList) {
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header, ::v-deep .el-tabs__item {
  font-size: 14px !important;
}

#app.dark-theme {
  .collapse-box {
    ::v-deep .el-collapse-item__content {
      margin-top: 0.625rem !important;
      padding-bottom: 0 !important;
    }
  }
}

::v-deep .el-tag {
  text-align: center !important;
}

.row-content {
  line-height: 2.5rem;
  transform: translateY(0.125rem);

  .el-col > span {
    display: inline-block;
    // width: 6.25rem;
    text-align: right;
    font-size: 0.875rem;
  }
}

.img-icon {
  display: inline-block;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 0.3125rem 0 0 !important;
  padding: 0 !important;
}

.custom-portrait {
  height: 100%;

  .component-container {
    width: 100%;
    height: 100%;
    position: relative;
    // 顶部
    .drawcontainer {
      width: 100%;
      height: 100%;

      display: flex;
      flex-direction: column;

      border-radius: 0.375rem;
      // 返回按钮
      .back {
        line-height: 2.5rem;
        height: 2.5rem;
        border-bottom: 0.0625rem solid #e9e9e9;
        color: #989a9c;
        padding: 0 0.9375rem;

      }

      // 文字区域
      .headtext {
        width: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 0.25rem;
        margin-top: 1.25rem;

        &:nth-of-type(1) {
          margin-top: 0 !important;
        }

        img {
          float: left;
          padding-right: 1.25rem;
          height: 6.25rem;
          margin: 1.25rem;
        }

        .headtitle {
          white-space: nowrap;
          font-weight: 700;
          font-style: normal;
          font-size: 1rem;
          color: #303032;
          padding-top: 1.25rem;
          width: 100%;
        }

        .headcontent {
          display: inline-block;
          //margin: 1.25rem 0;
          font-size: 14px;
          width: 100%;
          letter-spacing: 0.0313rem;
        }
      }

      .content-box {
        height: 100%;
        width: 100%;
        overflow: hidden;
        background: #fff;
        margin-top: 0.625rem;
        border-radius: 0.375rem;
        box-sizing: border-box;

        .drawmain {
          overflow-y: auto;
          background-color: #fff;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }

        .business-data-title {
          margin-bottom: 0.625rem;
        }
      }
    }

    .hk-container {
      width: 100%;
      height: 100%;

      padding: 0.625rem;
      display: flex;
      justify-content: center;
    }

    .opt-btn {
      text-align: center;
      -webkit-transform: translateY(-0.125rem);
      transform: translateY(-0.125rem);
      position: absolute;
      left: 48%;
      z-index: 1;
    }
  }
}

::v-deep .el-form-item {
  margin-bottom: 1.25rem;
}

// 去掉中间的外边距
.el-button + .el-button {
  margin-left: 0.625rem;
}

.dateFilter {
  display: flex;
  justify-content: flex-start;
  height: 2rem;
  margin-left: 0.4375rem;
}

::v-deep .el-collapse {
  background: #eef0f5;
}

/*::v-deep .el-collapse-item__content {
  padding-bottom: 0 !important;
}*/

::v-deep .el-collapse-item__header {
  font-weight: 600;
}

::v-deep .el-collapse-item {
  border-bottom: 0.0625rem solid #e6ebf5;

  .el-collapse-item__header {
    border-bottom: none;
    font-size: 1rem;
    font-weight: 600;
  }

  .el-collapse-item__wrap {
    border-bottom: none;
  }
}

.content-wk {
  padding: 0rem 0 1.25rem;
  // height: calc(100% - 6.25rem);
  overflow: auto;
}

.footer {
  padding: 0 1.25rem;
  background: #fff;
  text-align: right;
  line-height: 3.75rem;
}

.flex-box {
  display: flex;
  align-items: center;
  padding-right: 1.25rem;
}

.radius-icon {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  text-align: center;
  line-height: 0.75rem;
  border-radius: 50%;
  margin-right: 0.3125rem;

  i {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
  }
}

.text-level-normal {
  .radius-icon {
    background: rgba(75, 110, 239, 0.2);

    i {
      background: #4b6eef;
    }
  }
}

.text-level-greatmast {
  .radius-icon {
    background: rgba(255, 53, 53, 0.2);

    i {
      background: #ff3535;
    }
  }
}

.text-level-great {
  .radius-icon {
    background: rgba(250, 173, 20, 0.2);

    i {
      background: #f8b634;
    }
  }
}

.text-level-big {
  .radius-icon {
    background: rgba(105, 222, 168, 0.2);

    i {
      background: #69dfa9;
    }
  }
}

.text-elipsis {
  width: calc(100% - 9.375rem);
  text-align: left;
  display: inline-block;
}

.flow-wk {
  width: 100%;
  padding: 1.25rem;

  .timeline-item {
    .timeline-title {
      display: flex;
      align-items: center;
      margin: 0.625rem 0;

      span {
        margin-left: 1.25rem;

        &.timeline-type-icon {
          display: flex;
          align-items: center;
          color: #4b6eef;

          &::before {
            display: block;
            content: '';
            width: 0.3125rem;
            height: 0.3125rem;
            margin-right: 0.625rem;
            border-radius: 50%;
            background: #d8d8d8;
          }
        }
      }

      &::before {
        display: block;
        content: '';
        width: 0.875rem;
        height: 0.875rem;
        border-radius: 50%;
      }
    }

    &.timeline-finist .timeline-title::before {
      content: '√';
      background: #4b6eef;
      color: #fff;
      font-size: 0.125rem;
      border: 0.125rem solid #dbe2fc;
    }

    &.timeline-finist .timeline-container {
      border-left: 0.1875rem solid #4b6eef;
    }

    &.timeline-undo .timeline-title::before {
      content: '';
      background: #bfbfbf;
      color: #fff;
      font-size: 0.125rem;
      border: 0.125rem solid #ebebeb;
    }

    &.timeline-undo .timeline-container {
      border-left: 0.1875rem solid #bfbfbf;
    }

    .timeline-container {
      padding: 1.25rem;
      margin-left: 0.375rem;
      display: flex;
      align-items: center;

      .form-list {
        width: 100%;
      }
    }
  }
}

::v-deep .el-form .el-form-item--small.el-form-item {
  margin-bottom: 1.25rem;
}

.file-link {
  font-size: 0.875rem;
  display: inline-block;
  padding: 0.625rem 0;
  color: #4b6eef;
}

::v-deep {
  .el-tabs__nav-wrap::after {
    display: none;
  }

  .el-date-editor.el-input {
    width: 100% !important;
  }
}
</style>
